<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>666算法可视化平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/codemirror.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <style>
        .bar {
            background-color: blue;
            margin: 2px;
            display: inline-block;
            vertical-align: bottom;
            width: 40px;
            text-align: center;
            color: white;
            font-weight: bold;
        }
        
        #output {
            margin-bottom: 20px;
        }
        
        #step-label {
            font-size: 24px;
            font-weight: bold;
            margin-top: 10px;
            width: 100%;
        }
        
        #app>form>.form-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        #app>form>.form-row>.col-sm-8 {
            display: flex;
            align-items: center;
            padding-right: 5px;
        }
        
        #app>form>.form-row>.col-sm-4 {
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            padding-left: 5px;
            width: 60px;
        }
        
        #sort-button {
            width: 70px !important;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            margin-left: 1px;
        }
        
        #app>.row>.col-sm:not(:first-child) {
            margin-top: 10px;
        }
        
        #play-button {
            background-color: #007bff;
            color: white;
            border: none;
            font-weight: bold;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            position: relative;
            transition: all .2s ease-in-out;
        }
        
        #play-button:hover {
            opacity: 0.8;
        }
        
        #play-button:active:after {
            content: "";
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 10px 0 10px 20px;
            border-color: transparent transparent transparent #fff;
        }
        
        .btn-group>.btn {
            margin-left: 5px;
            margin-right: 5px;
        }
    </style>
</head>

<body>
    <div id="app" class="container mt-5">
        <h1 class="mb-5">666算法可视化平台</h1>
        <form>
            <div class="form-row">
                <div class="col-sm-8">
                    <label for="input" class="sr-only">Enter a list of numbers:</label>
                    <input type="text" class="form-control" id="input" v-model="input" placeholder="Enter a list of numbers">
                </div>
                <div class="col-sm-4">
                    <button type="button" class="btn btn-primary btn-block" id="sort-button" @click="sort">Sort</button>
                </div>
            </div>
            <br>
            <div id="output"></div>
            <div class="row">
                <div class="col-sm-12 col-md">
                    <h3 class="text-center" id="step-label">Step 0 of 0</h3>
                </div>
                <div class="col-sm">
                    <div class="btn-group">
                        <button v-show="currentFrame >= 0" type="button" class="btn btn-secondary" @click="prevStep">Prev Step</button>
                        <button type="button" class="btn" id="play-button" @click="play">
                            <svg viewBox="0 0 100 100" width="50%">
                                <polygon points="0,0 0,100 100,50" fill="#fff"></polygon>
                            </svg>
                        </button>
                        <button v-show="currentFrame < maxFrame" type="button" class="btn btn-primary" @click="nextStep">Next Step</button>
                        <button v-show="currentFrame == maxFrame" type="button" class="btn btn-secondary" @click="restart">Restart</button>
                    </div>
                </div>
            </div>
            <textarea id="code"></textarea>
        </form>

    </div>

    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/codemirror.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/mode/javascript/javascript.min.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                input: '5, 4, 3, 2, 1',
                history: [],
                currentFrame: -1,
                maxFrame: -1,
                intervalId: null,
                editor: null,
                code: `//欢迎使用666可视化工具,目前只支持JS
function bubbleSort(arr,that) {
// arr是固定参数
  let len = arr.length;
  for (let i = 0; i < len - 1; i++) {
    for (let j = 0; j < len - i - 1; j++) {
      if (arr[j] > arr[j + 1]) {
        let temp = arr[j];
        arr[j] = arr[j + 1];
        arr[j + 1] = temp;

        // 存储每一次交换的结果，固定格式
        that.history.push(arr.slice());
      }
    }
  }
}`
            },
            methods: {
                sort() {
                    this.history = [];
                    let list = this.input.split(',').map(Number);
                    let maxHeight = 10;
                    this.render(list.slice(), maxHeight);

                    if (this.hasCode()) {
                        let coeds = this.getCode()
                        let fn = eval(`(${coeds})`);
                        fn(list, this);
                    } else {
                        for (let i = 0; i < list.length - 1; i++) {
                            for (let j = 0; j < list.length - i - 1; j++) {
                                if (list[j] > list[j + 1]) {
                                    let temp = list[j];
                                    list[j] = list[j + 1];
                                    list[j + 1] = temp;
                                    this.history.push(list.slice());
                                }
                            }
                        }
                    }

                    this.history.push(list.slice());
                    this.maxFrame = this.history.length - 1;
                    this.currentFrame = 0;
                    this.render(this.history[this.currentFrame], maxHeight);
                    this.updateLabel();
                },
                render(list, maxHeight) {
                    let outputDiv = document.getElementById('output');
                    outputDiv.innerHTML = '';
                    let scaleFactor = maxHeight / Math.max(...list);
                    for (let i = 0; i < list.length; i++) {
                        let bar = document.createElement('div');
                        bar.className = 'bar';
                        bar.style.height = `${scaleFactor * 20 * list[i]}px`;
                        bar.innerText = list[i].toString();
                        outputDiv.appendChild(bar);
                    }
                },
                nextStep() {
                    if (this.currentFrame < this.maxFrame) {
                        this.currentFrame++;
                        this.render(this.history[this.currentFrame], 10);
                        this.updateLabel();
                    }
                },
                prevStep() {
                    if (this.currentFrame > 0) { // 当前帧数大于0时才执行操作
                        this.currentFrame--;
                        this.render(this.history[this.currentFrame], 10);
                        this.updateLabel();
                    }
                },
                restart() {
                    this.currentFrame = -1;
                    this.sort();
                },
                updateLabel() {
                    let label = `Step ${this.currentFrame + 1} of ${this.maxFrame + 1}`;
                    document.getElementById('step-label').innerText = label;
                },
                play() {
                    if (this.intervalId) {
                        clearInterval(this.intervalId);
                        this.intervalId = null;
                    } else {
                        this.intervalId = setInterval(() => {
                            if (this.currentFrame < this.maxFrame) {
                                this.nextStep();
                            } else {
                                clearInterval(this.intervalId);
                                this.intervalId = null;
                            }
                        }, 500);
                    }
                },
                getCode() {
                    return this.editor.getValue();
                },
                hasCode() {
                    let code = this.getCode();
                    return code.trim().length > 0;
                },
            },

            mounted() {

                this.editor = CodeMirror.fromTextArea(document.getElementById("code"), {
                    lineNumbers: true,
                    mode: "text/javascript",
                    tabSize: 2,
                    theme: "default",
                });
                this.editor.setValue(this.code);
                this.sort();
            },
        });
    </script>
</body>

</html>